<template>
  <div class="admin-page report-page">
    <BackPage title="智能报表管理" />
    <div class="search-params f-r a-c j-b">
      <el-form inline>
        <el-form-item label="时间筛选：">
          <el-date-picker
            v-model="searchParams.timeValue"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSearch">筛选</el-button>
          <el-button round @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="onAdd">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="f-r a-c j-b" style="overflow: hidden">
      <div class="block">
        <div class="title">用户问题统计</div>
        <div class="card-box card1">
          <v-chart style="width: 100%;height: 100%" :option="option1" />
        </div>
      </div>
      <div class="block" style="margin-left: 23px">
        <div class="title">问题类型分析</div>
        <div class="card-box card2">
          <div v-for="(item,index) in list" class="card2-item">
            <div class="item-top f-r a-c j-b">
              <div>{{ item.name }}</div>
              <div class="f-g f-r a-c j-e">
                <div>{{ item.total }}</div>
                <div style="margin-left: 12px">{{ item.p }}%</div>
              </div>
            </div>
            <div class="bar">
              <div :class="['bar-top f-r a-c j-e','bar-top' + index]" :style="{width: item.p + '%'}">
                <div class="bar-top-r" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="f-r a-c j-b" style="overflow: hidden;margin: 44px 0">
      <div class="block">
        <div class="title">解决问题统计</div>

        <div class="card-box card3 f-c">
          <div class="card3-top f-g">
            <v-chart style="width: 100%;height: 100%" :option="option2" />
          </div>
          <div class="card3-bottom f-r">
            <div class="f-c a-c j-c">
              <div class="name f-r a-c">
                <span>已解决问题</span>
                <span class="name2">80.1%</span>
              </div>
              <div class="value">6417个</div>
            </div>
            <div class="f-c a-c j-c">
              <div class="name f-r a-c">
                <span>解决问题平均时长</span>
              </div>
              <div class="value">4.5小时</div>
            </div>
          </div>
        </div>
      </div>
      <div class="block f-g">
        <div class="title" style="margin-left: 23px">解决问题统计</div>
        <div class="card-box card4">
          <v-chart style="width: 100%;height: 100%" :option="option3" />
        </div>
      </div>
    </div>
    <div class="block" style="overflow: hidden">
      <div class="title">解决问题数</div>
      <div class="car-box card5">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  name: 'Index',
  mixins: [crud],
  data() {
    return {
      dialogVisible: false,
      searchParams: {
        timeValue: []
      },
      option1: {
        grid: {
          top: 45,
          left: 40,
          right: 40,
          bottom: 40,
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(238, 238, 238, 1)'
            }
          },
          axisLabel: {
            color: '#777777',
            fontSize: 9
          },
          axisTick: {
            show: false
          },
          data: ['08-10', '08-11', '08-12', '08-13', '08-14', '08-15', '08-16']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#777777',
            fontSize: 9
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(238, 238, 238, 1)'
            }
          }
        },
        series: [
          {
            data: [20, 30, 40, 50, 70, 60, 40],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#01A1FF'
            },
            symbol: 'none',
            lineStyle: {
              width: 5
            }
          }
        ]
      },
      option2: {
        title: {
          text: '8141',
          x: 'center',
          y: '38%',
          textStyle: {
            fontWeight: 'normal',
            color: '#232323',
            fontSize: 48
          },
          subtext: '总数',
          subtextStyle: {
            top: 'top',
            fontSize: 24
          }
        },
        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          radius: ['50%', '66%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: 80,
            name: '01',
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#FF957C' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFE97D' // 100% 处的颜色
                  }]
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '02',
            value: 20,
            itemStyle: {
              color: '#DEE6EE'
            }
          }]
        }]
      },
      option3: {
        grid: {
          top: 45,
          left: 40,
          right: 40,
          bottom: 40,
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(238, 238, 238, 1)'
            }
          },
          axisLabel: {
            color: '#777777',
            fontSize: 9
          },
          axisTick: {
            show: false
          },
          data: ['08-10', '08-11', '08-12', '08-13', '08-14', '08-15', '08-16']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#777777',
            fontSize: 9
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(238, 238, 238, 1)'
            }
          }
        },
        series: [
          {
            name: '新增问题数',
            data: [20, 30, 40, 50, 70, 60, 40],
            type: 'bar',
            itemStyle: {
              color: '#FFB45E'

            },
            barWidth: 22
          },
          {
            name: '解决问题数',
            data: [20, 30, 40, 50, 70, 60, 40],
            type: 'bar',
            itemStyle: {
              color: '#B0D176'

            },
            barWidth: 22
          }
        ]
      },
      list: [
        { name: '普通咨询', total: 200, p: 20 },
        { name: '计划变更', total: 200, p: 30 },
        { name: '精准帮办', total: 200, p: 50 },
        { name: '外线联报', total: 200, p: 40 },
        { name: '普通问题', total: 200, p: 40 }
      ],
      columns: [
        { prop: 'label', label: '项目名称' },
        { prop: 'createBy', label: '问题类型' },
        { prop: 'createTime', label: '提交人' },
        { prop: 'createTime', label: '联系方式' },
        { prop: 'createTime', label: '提交时间' },
        { prop: 'createTime', label: '停留时长' },
        { prop: 'createTime', label: '未解决原因' }
      ]
    }
  },
  methods: {
    onAdd() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.report-page {
  .block {
    width: 100%;
    .title {
      font-size: 13px;
      font-weight: normal;
      color: #232323;
      line-height: 18px;
      margin-bottom: 26px;
    }
    .card-box {
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.05);
    }
    .card1 {
      width: 757px;
      height: 322px;
    }
    .card2 {
      width: 100%;
      height: 322px;
    }
  }
  .card3 {
    width: 357px;
    height: 368px;
    .card3-top {}
    .card3-bottom {
      border-top: 1px solid #E7E7E7;
      height: 80px;
      > div {
        width: 50%;
        height: 100%;
      }
      .name {
        color: #777777;
        font-size: 13px;;
      }
      .name2 {
        color: #FFA67C;
      }
      .value {
        color: #232323;
        font-size: 21px;
        line-height: 21px;
        margin-top: 5px;
      }
    }
    .card3-bottom > div:first-child {
      border-right: 1px solid #E7E7E7;
    }
  }
  .card4 {
    margin-left: 23px;
    width: 100%;
    height: 368px;
  }
  .card2 {
    padding: 30px;
    .card2-item {
      margin-top: 20px;
      .item-top {
        width: 100%;
        height: 14px;
        font-size: 10px;
        font-weight: normal;
        color: #777777;
        line-height: 17px;
        margin-bottom: 10px;
      }
      .bar {
        width: 100%;
        height: 7px;
        background: #EFEFEF;
        border-radius: 5px;
        opacity: 1;
        position: relative;
      }
      .bar-top-r {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);
        border: 2px solid;
      }
      .bar-top {
        position: absolute;
        height: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
      }
      .bar-top0 {
        background: linear-gradient(360deg, #FADB0F 0%, #FCAE1A 100%);
        .bar-top-r {
          border-color: #FADB0F;
        }
      }
      .bar-top1 {
        background: linear-gradient(360deg, #2BDFB0 0%, #4FE550 100%);
        .bar-top-r {
          border-color: #2BDFB0;
        }
      }
      .bar-top2 {

        background: linear-gradient(360deg, #965EFD 0%, #3F8AFD 100%);
        .bar-top-r {
          border-color: #965EFD;
        }
      }
      .bar-top3 {

        background: linear-gradient(360deg, #FBA35C 0%, #FC6075 100%);
        .bar-top-r {
          border-color: #FBA35C;
        }
      }
      .bar-top4 {

        background: linear-gradient(360deg, #FBA35C 0%, #FC6075 100%);
        .bar-top-r {
          border-color: #FBA35C;
        }
      }
    }
  }
}
</style>
